<template>
  <div class="app-container">
    <el-form  class="query-wrapper" :model="queryParams" inline>
      <el-form-item prop="brand">
        <el-select
          v-model="queryParams.brand"
          filterable
          placeholder="Brand"
          clearable
          allow-create>
          <el-option
            :key="item.name"
            :label="item.name"
            :value="item.name"
            v-for="item in brands"
          >
          </el-option>
        </el-select> 
      </el-form-item>
      <el-form-item prop="model">
        <el-input v-model="queryParams.model" style="width: 180px" placeholder="Model" clearable/>
      </el-form-item>
      <el-form-item> 
        <el-button type="primary" icon="search"  @click="search">{{  $t("ship.button.search") }}</el-button>
        <SearchReset :query-params="queryParams" @reset="resetQuery"></SearchReset>
        <el-button type="warning" plain  icon="download" @click="handleExport">{{ $t("ship.button.export") }}</el-button>
      </el-form-item>
    </el-form> 
  </div>
 
  <el-table
        stripe 
        :data="listData"
        :show-overflow-tooltip="true"    
        :header-cell-style ="{textAlign:'center'}" 
        :cell-style ="{textAlign:'center'}" 
         ref="tableRef"
        @sort-change="handleSortChange"
    >
      <el-table-column label="Basic Data"  >
        <el-table-column prop="brand" label="Brand" width="120"  />
        <el-table-column prop="model" label="Model" width="150" />
        <el-table-column prop="cargoType" label="Cargo Type" width="260"/>
        <el-table-column prop="fuelType" label="Fuel Type" width="160"  />  
        <el-table-column prop="weight" label="Unit Weight(kg) " minWidth="120"   />
      </el-table-column>
      <el-table-column label="Declared" align="center" style="color:blue" header-align="center" >
        <el-table-column prop="declareWidth" label="W" label-class-name="header-title" />
        <el-table-column prop="declareLength" label="L" label-class-name="header-title" /> 
        <el-table-column prop="declareHeight" label="H" label-class-name="header-title" />
        <el-table-column prop="unitCbm" label="M3/UNIT" minWidth="120" label-class-name="header-title"  /> 
      </el-table-column>  
      <el-table-column label="Measured" align="center" header-align="center" >
        <el-table-column prop="measureWidth" label="W"  label-class-name="header-title-red"  >
          <template #default="scope">
            <span :class="scope.row.measureWidth!=scope.row.declareWidth?'diff-measure':''">{{ scope.row.measureWidth }}</span> 
          </template>
        </el-table-column>
        <el-table-column prop="measureLength" label="L" label-class-name="header-title-red" >
          <template #default="scope">
            <span :class="scope.row.measureLength!=scope.row.declareLength?'diff-measure':''">{{ scope.row.measureLength }}</span> 
          </template>
        </el-table-column> 
        <el-table-column prop="measureHeight" label="W" label-class-name="header-title-red" >
          <template #default="scope">
            <span :class="scope.row.measureHeight!=scope.row.declareHeight?'diff-measure':''">{{ scope.row.measureHeight }}</span> 
          </template>
        </el-table-column> 
        <el-table-column prop="measureUnitCbm" label="M3/UNIT" label-class-name="header-title-red" /> 
      </el-table-column>   
      <el-table-column prop="diffPerUnit" label="Difference Per Unit" minWidth="150" label-class-name="header-title-diff" />
      </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    :page="queryParams.pageNum"
    :limit="queryParams.pageSize"
    @pagination="pageQuery"
    style="float: right"
  />   
</template>

<script lang="ts" setup name="declaredMeasured">
import moment from "moment";
import { downloadFile } from "@/utils/downloadFile";
// @ts-nocheck
import { ref, onMounted, reactive } from "vue";
import service from "@/utils/request";
import { useTableDrag } from '@/hooks/useHooks'; 
const { tableRef } = useTableDrag(); 
const custForm = ref(null); 

const total = ref(0);
 
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  brand: null,
  model: null,
  orderByColumn: undefined,
  isAsc: undefined,
});

let brands = ref([] as any);  
const listData = ref([]);
const refreshTable = async () => {
  let result = await service.get("/shipping/declared/declareMeasure", {
    params: queryParams,
  });
  if(result){
    listData.value = result.data; 
   total.value = result.total;
  }
  
  result = await service.get("/shipping/brand/list");
  if (result) {
    brands.value = result.data;
  }
};
 
const resetQuery = (data) => {
    Object.assign(queryParams, data)
    refreshTable()
}

const pageQuery = async (e) => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  refreshTable();
};


const handleBrand= async(value)=>{
  const isOptionSelected = brands.value.some(option => option.value === value);
      if (!isOptionSelected) { 
        await service.post("/shipping/brand", {name:value})
      }  
}
 
const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};
 
const formRef = ref(null);
  
 
function handleExport() {
  let title = 'Declared vs Measured_'+moment( new Date()).format('YYYYMMDD')+".xlsx"
  downloadFile("/shipping/declared/declareMeasure/export", queryParams, title);
}

onMounted(async () => { 
  refreshTable();
});
</script> 
<style lang="scss">
.header-title{
  background-color: #ffff99!important;
}
.column-declared{
  background-color: rgb(232, 243, 71) !important;

}
.header-title-red,.column-measure{
  background-color:#ff99cc !important;

}
.header-title-diff{
  background-color: #00b050 !important;
}
.diff-measure{
  color: red;
  font-style: italic;
  font-weight: 800;
  font-size: 14px
}
</style>
